<template>
	<view class="news-card" @click="linkDetail(item.id)">
		<view style="margin-bottom: 20rpx;">
			<text class="news-card-date">
				{{item.date}}
			</text>
		</view>
		<block v-for="v in item.list" :key="v.id">
			<view class="news-card-content">
				<view class="news-card-left">
					<text class="news-card-title">{{v.title}}</text>
					<text class="news-card-copy">{{v.copy}}</text>
				</view>
				<image :src="v.img" mode="aspectFill" class="news_card_img"></image>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: ['item'],
		name: "NewsCard",
		data() {
			return {

			};
		},
		methods: {
			linkDetail(id) {
				uni.navigateTo({
					url: `/pages/newsDetail/newsDetail?id=${id}`,
					animationType: 'slide-in-right', // 指定动画类型
					animationDuration: 1000 // 动画时长
				})
			}
		}
	}
</script>

<style scoped>
	
	.news-card-date {
		padding: 5rpx 10rpx;
		background: #2979ff;
		border-radius: 10rpx;
		font-weight: bold;
		color: #ffffff;
	}
	
	.news-card-content {
		padding: 20rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		border-bottom: 1rpx solid #B3B3B3;
	}

	.news-card-left {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		flex: 1;
		margin-right: 20rpx;
	}

	.news_card_img {
		width: 260rpx;
		height: 180rpx;
		border-radius: 10rpx;
	}

	.news-card-title {
		font-weight: 600;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
		word-break: break-all;
	}
	
	.news-card-copy {
		font-size: 24rpx;
		color: #999999;
	}
</style>